$(function() {

    //LANGUAGE BUTTONS EFFECTS
    $('#lang > ul > li > a').mouseover(function() {
        $(this).css({'color': '#E8E595'});
    }).mouseout(function() {
        $(this).css({'color': ''});
    });

    //SLIDES - WORK SHOW/HIDE BUTTONS
     $('.how_we_work_nav').find('li').click(function(){
       var i = $('.how_we_work_nav > ul > li').index(this);

       //if visibility check, else no action
         if( $(".slides_work:eq(" + i + "):visible").length !== 1 ) {
             //animate buttons
             $(".how_we_work_buttons").removeClass('b_active');
             $(".how_we_work_buttons:eq(" + i + ")").addClass(' b_active');

             //calculate left margin
             var $div = $(".slides_work:eq(" + i + ")");
             var $lm = ($div.parent().width() / 2 - $div.width() / 2) / $div.parent().width() * 100 + "%";

             $(".slides_work").hide();
             $div.css({'marginLeft' : '-100%' , 'opacity' : '0'})
                 .show()
                 .animate({'marginLeft' : $lm
                     , 'opacity' : '1'}, 1200, "easeInOutQuint");
         }
    });


    //CONTACT FORM SHOW/HIDE BUTTONS
    $('.contact_us_nav').find('li').click(function(){
        var i = $('.contact_us_nav > ul > li').index(this);

        //if visibility check, else no action
        if( $(".contact_forms:eq(" + i + "):visible").length !== 1 ) {
            //animate buttons
            $(".project_form_buttons").css('background', 'transparent');
            $(".project_form_buttons:eq(" + i + ")").css('background', '#D0A825');

            $(".contact_forms").stop().hide();
            $(".contact_forms:eq(" + i + ")")
                .effect('bounce', {"direction" : "down", "mode" : "show", "distance" : "6", "times" : 2}, 800);

            $('input, textarea').placeholder();
        }
    });


    //ROTATING BILLBOARD
    var Banner = setInterval( "slideSwitch(direction, easing)", 9000 );
    //Banner;

    //STOP BILLBOARD ROTATION clearInterval(Banner);
    var playback = true;
    $('#playback').click(function() {

        if(playback === true) {
            $(this).find('img').attr("src", "http://forafreeworld.com/img/playback_play.png").effect('highlight', 1000);
            clearInterval(Banner);
            playback = false;

        } else {
            $(this).find('img').attr("src", "http://forafreeworld.com/img/playback_pause.png").effect('highlight', 1000);
            Banner = setInterval( "slideSwitch(direction, easing)", 9000 );
            playback = true;
        }
    });


    //BE FREE BUTTON HOVER
    $('#be_free_button').mouseover(function() {
        $(this).stop().animate({ "borderColor" : "#3F617B", "backgroundColor" : "#FFF", "color" : "#3F617B"}, 500);
        })
        .mouseout(function() {
        $(this).stop().animate({ "borderColor" : "#FFF", "backgroundColor" : "transparent", "color" : "#fff"}, 500);
        })
        .click(function() {
        $(this).stop().animate({ "borderColor" : "#FFF", "backgroundColor" : "transparent", "color" : "#fff"}, 500);
    });


    //TEXTAREA AUTO-RESIZE
    $('body').on('keyup','textarea', function (){
        $(this).css({'minHeight' : '40px', 'maxHeight' : '100px', 'height' : 'auto' });
        $(this).height( this.scrollHeight );
    });
    $('body').find( 'textarea' ).keyup();


    //form support for browsers not supporting placeholder
    $('input, textarea').placeholder();

});



//define animation options - our work
var direction = new Array();
direction[0] = {
    "left" : "-150%",
    "top" : "-150%"
};
direction[1] = {
    "top" : "150%"
};
direction[2] = {
    "left" : "150%"
};
direction[3] = {
    "top" : "-150%"
};

var easing = new Array('easeInQuint', 'easeInOutElastic', 'easeOutBack', 'easeOutCirc');



function slideSwitch(dir, ease) {
    var $active = $('#slider_work > div.active');

    if ( $active.length == 0 ) $active = $('#slider_work > div:last');
    var $next = $active.next('div').length ? $active.next('div') : $('#slider_work > div:first');
    $active.addClass('last-active');

    //random direction generator
    var i = Math.floor(Math.random()*4);
    var j = Math.floor(Math.random()*4);

    var option = dir[i];
    var easing = ease[j];

    $next.css(option)
        .addClass('active')
        .animate({ "left" : "" , "top" : ""}, {duration: 2000, easing: easing, start: function() {
            $active.removeClass('active last-active');
        }
        });

}